<template>
  <div class="coupon-activation">
    <div class="pd-lr30">
      <couponCard :cardId="cardId" @sendCouponInfo="getCouponInfo" />
      <div class="form-box">
        <div class="title">持有人信息</div>

        <van-field
          clearable
          custom-style="padding:20rpx 10rpx"
          :value="nameVal"
          :border="false"
          label="真实姓名"
          placeholder="输入持卡券人真实姓名"
          @input="onInputName"
        />

        <van-cell-group>
          <van-field
            clearable
            custom-style="padding:20rpx 10rpx"
            type="idcard"
            :value="userIdVal"
            :border="false"
            label="身份证号"
            :maxlength="18"
            placeholder="输入持卡券人身份证号"
            @input="onInputUserId"
          />
        </van-cell-group>
        <!-- <van-cell-group>
          <van-field
            clearable
            custom-style="padding:20rpx 10rpx"
            :value="mobileVal"
            label="联系手机号"
            type="number"
            :border="false"
            :maxlength="11"
            placeholder="输入持卡券人手机号"
            @input="onInputMobile"
          />
        </van-cell-group> -->
      </div>
    </div>

    <div class="photo-box">
      <div class="title">入园照片信息</div>
      <div class="subtitle">
        <div style="color: #000;font-size:26rpx">
          您需要为
          <text style="color: #1772ff;font-size:32rpx;margin:0 6rpx">{{ maxCount }}</text
          >位入园者分别上传一张正面照
        </div>
        <div style="color: #666;">
          例如:【一大一小】即1个大人和1个小孩的照片
        </div>
      </div>
      <van-uploader
        v-if="maxCount"
        multiple
        accept="image"
        sizeType="original"
        :file-list="fileList"
        :max-count="maxCount"
        @after-read="afterRead"
        @delete="onDelete"
        preview-size="200rpx"
      />
      <div class="tips-text" @click="isShowRules = true">
        查看照片示例<text class="arrow-q-icon"></text>
      </div>
      <div class="alert-box">
        <text class="tips-icon"></text
        >您上传的照片只用于入园或核销使用，平台承诺保护您的所有隐私数据，照片将存储于阿里云中。
      </div>
    </div>
    <div class="fixed-box"></div>
    <div class="footer-fixed">
      <button
        class="btn"
        :class="{ dis: disabled }"
        :loading="loading"
        :disabled="disabled"
        @click="postCardActivate"
      >
        激活
      </button>
    </div>

    <van-popup
      :show="isShowRules"
      round="10"
      custom-style="border-radius:20rpx;"
    >
      <div class="rule-main">
        <div class="title">照片示例</div>
        <img src="https://media.wxcwy.com/images/plmm.png" class="ex-img" />
        <div class="text">可以是日常个人生活单人照</div>
        <div class="text">只需保证图片中只有一张人脸即可噢</div>
        <div class="agree-btn" @click="isShowRules = false">我知道了</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
// const TOKEN = uni.getStorageSync("TOKEN");
import couponCard from "../_coupon/coupon-card";
import { mapState } from "vuex";
export default {
  components: {
    couponCard
  },
  data() {
    return {
      fileDisabled: false,
      nameVal: "",
      mobileVal: "",
      userIdVal: "",
      fileList: [],
      media: [],
      cardId: "",
      loading: false,
      couponInfo: {},
      isShowRules: false,
      TOKEN: ""
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    disabled() {
      return (
        !this.nameVal || !this.userIdVal || this.fileList.length < this.maxCount
      );
    },
    maxCount() {
      return this.couponInfo.people_number;
    }
  },
  onLoad(options) {
    this.TOKEN = uni.getStorageSync("TOKEN");
    this.cardId = options.id;
  },
  methods: {
    getCouponInfo(data) {
      this.couponInfo = data;
      if (this.couponInfo.media != undefined) {
        this.fileList = this.couponInfo.media;
      }
    },
    onInputName(e) {
      this.nameVal = e.detail;
    },
    onInputMobile(e) {
      this.mobileVal = e.detail;
    },
    onInputUserId(e) {
      this.userIdVal = e.detail;
    },
    afterRead(event) {
      const { file } = event.detail;
      // this.fileList = this.fileList.concat(file);
      const uploadTasks = file.map((file, index) => {
        return this.uploadFilePromise(file, index);
      });
      console.log(uploadTasks);
      Promise.all(uploadTasks).then(data => {
        const newFileList = data.filter(item => {
          return item.id;
        });
        console.log(newFileList);
        this.fileList = this.fileList.concat(newFileList);
      });
    },
    onDelete(event) {
      const index = event.detail.index;
      this.$api.cardDestroyImg({ id: this.fileList[index].id }).then(res => {
        if (res.code == 200) {
          this.fileList.splice(index, 1);
        }
      });
    },
    uploadFilePromise(file, index) {
      return new Promise((resolve, reject) => {
        uni.showLoading({
          title: "照片上传校验中...",
          mask: true
        });
        this.fileDisabled = true;
        wx.uploadFile({
          url: this.$api.cardUploadImg(), // 仅为示例，非真实的接口地址
          filePath: file.path,
          Accept: "application/json",
          name: "file",
          header: {
            Authorization: "Bearer " + this.TOKEN
          },
          formData: {
            sort: this.fileList.length + index,
            file_no: this.couponInfo.file_no
          },
          success: res => {
            this.fileDisabled = false;
            let { data, code, msg } = JSON.parse(res.data);
            resolve(data);
            if (code == 200) {
              uni.hideLoading();
            } else {
              uni.showToast({
                title: msg,
                duration: 2000,
                icon: "none"
              });
            }
          }
        });
      });
    },
    postCardActivate() {
      if (this.loading) return;
      this.loading = true;
      this.$api
        .postCardActivate({
          card_id: this.cardId,
          mobile: this.userInfo.mobile,
          name: this.nameVal,
          id_card: this.userIdVal
        })
        .then(res => {
          if (res.code == 200) {
            uni.showToast({
              title: "激活成功",
              duration: 2000
            });
            setTimeout(() => {
              uni.redirectTo({
                url: `/pages/coupon/couponActivationed/couponActivationed?id=${res.data.id}&card_no=${res.data.card_no}`
              });
            }, 1000);
          }
          this.loading = false;
        });
    }
  }
};
</script>
<style lang="scss">
.coupon-activation {
  padding: 30rpx 0;
  box-sizing: border-box;
  border-radius: 20rpx;
  .pd-lr30 {
    padding: 0 30rpx;
  }
  .fixed-box {
    height: 162rpx;
  }
  .rule-main {
    width: 600rpx;
    padding: 40rpx 0;
    box-sizing: border-box;
    .title {
      font-size: 32rpx;
      color: #333;
      text-align: center;
      margin-bottom: 30rpx;
    }
    .ex-img {
      width: 400rpx;
      height: 400rpx;
      display: block;
      margin: 0 auto 30rpx;
    }
    .text {
      color: #666666;
      font-size: 28rpx;
      text-align: center;
    }
    .agree-btn {
      width: 220rpx;
      line-height: 60rpx;
      border-radius: 56rpx;
      border: 1px solid rgba(23, 114, 255, 1);
      text-align: center;
      margin: 30rpx auto 0;
      color: #1772ff;
    }
  }
  .form-box {
    .title {
      font-size: 30rpx;
      color: #333;
      line-height: 42rpx;
      margin-bottom: 10rpx;
      font-weight: 600;
    }
  }
  .photo-box {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-top: 12rpx solid #f4f4f4;
    .title {
      font-size: 30rpx;
      color: #333;
      line-height: 42rpx;
      margin-bottom: 10rpx;
      font-weight: 600;
    }
    .subtitle {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 30rpx;
      line-height: 40rpx;
    }
    .tips-text {
      color: #1772ff;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20rpx;
    }
    .alert-box {
      font-size: 26rpx;
      color: #2ba3fe;
      display: flex;
      align-items: center;
      background: #e9f7ff;
      border-radius: 8rpx;
      padding: 18rpx 20rpx;
      line-height: 36rpx;
      margin-top: 36rpx;
      .tips-icon {
        flex: 0 0 36rpx;
        height: 36rpx;
        background: url(https://media.wxcwy.com/mini/images/notebl_icon@2x.png) no-repeat;
        background-size: 100%;
        margin-right: 8rpx;
      }
    }
  }
  .footer-fixed {
    background: #fff;
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    padding-bottom: 40rpx;
    width: 100%;
    .btn {
      width: 690rpx;
      height: 112rpx;
      line-height: 112rpx;
      margin: 0 auto;
      background: linear-gradient(
        270deg,
        rgba(44, 172, 255, 1) 0%,
        rgba(40, 123, 252, 1) 100%
      );
      border-radius: 56rpx;
      font-size: 36rpx;
      font-weight: 500;
      text-align: center;
      color: #fff;
      &.dis {
        background: #cbc9cc;
      }
    }
  }
}
</style>
